<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';


// 获取 dom 实例
const target = ref(null)
// echarts 实例变量
let myChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
  myChart = echarts.init(target.value);
  renderChart()
})

// const getSeriesData = () => {
//   const series = []
//   props.data.abnormals.forEach((item, index) => {
//     // 上层
//     series.push({
//       value: item.value,
//       name: item.name,
//       type: 'pie', // 图表类型:饼图
//       clockwise: false, // 逆时针排列
//       emphasis: {
//         scale: false // 鼠标悬停动画：不展示
//       },
//       radius: [73 - index * 15 + '%', 68 - index * 15 + '%'], // 饼图大小
//       center: ['55%', '55%'], // 饼图位置
//       label: {
//         show: false
//       },
//       data: [
//         {
//           value: item.value,
//           name: item.name
//         },
//         {
//           value: 1000,
//           itemStyle: {
//             color: 'rgba(0,0,0,0)',
//             borderWidth: 0
//           },
//           tooltip: {
//             show: false
//           },
//           emphasis: {
//             scale: false // 鼠标悬停动画：不展示
//           },
//         }
//       ]
//     })
//     // 底层
//     series.push({
//       name: item.name,
//       type: 'pie', // 图表类型:饼图
//       silent: true, // 鼠标事件：不触发
//       z: 1, // 层级
//       clockwise: false, // 逆时针排列
//       emphasis: {
//         scale: false // 鼠标悬停动画：不展示
//       },
//       radius: [73 - index * 15 + '%', 68 - index * 15 + '%'], // 饼图大小
//       center: ['55%', '55%'], // 饼图位置
//       label: {
//         show: false
//       },
//       data: [
//         {
//           value: 7.5,
//           itemStyle:
//           {
//             color: 'rgb(3,31,62)',
//             borderWidth: 0
//           },
//           tooltip: {
//             show: false
//           },
//           emphasis: {
//             scale: false // 鼠标悬停动画：不展示
//           },
//         },
//         {
//           value: 2.5,
//           itemStyle:
//           {
//             color: 'rgba(0,0,0,0)',
//             borderWidth: 0
//           },
//           tooltip: {
//             show: false
//           },
//           emphasis: {
//             scale: false // 鼠标悬停动画：不展示
//           },
//         }
//       ]
//     })
//   })

//   return series
// }

const renderChart = () => {
  const option = {
    legend: {  // 图例配置
      show: true,
      icon: 'circle', // 图例形状
      top: 'center', // 图例位置
      right: '2%', // 图例位置
      // data: props.data.abnormals.map(item => item.name),
      width: -5,  // 图例宽度，以列进行展示
      itemWidth: 10, // 图例图标宽度
      itemHeight: 10, // 图例图标高度
      itemGap: 10, // 图例间距
      textStyle: { // 图例文字样式
        fontSize: 12,
        lineHeight: 5,
        color: '#666'
      },
    },
    tooltip: {  // 提示框配置
      show: true,
      trigger: 'item', // 触发类型
      // formatter: '{a}<br/>{b}: {c}({d}%)', // 提示框内容
      formatter: '{c}'
    },
    yAxis: [
      {
        type: 'category',
        axisLine: {
          show: false
        }
      }
    ],
    xAxis: [
      {
        show: false
      }
    ],
    // series: getSeriesData()
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '70%'],
        // adjust the start and end angle
        startAngle: 180,
        endAngle: 360,
        data: [
          { value: 80, name: '在用资产' },
          { value: 20, name: '备用资产' }
        ]
      }
    ]
  }

  myChart.setOption(option);
}


</script>

<template>
  <div>
    <div>资产使用情况</div>
    <div ref="target" style="width: 100%; height: 100%;"></div>
  </div>

</template>

<style scoped></style>